<script setup>
import {ref, computed, onMounted} from 'vue'
import {useRoute, useRouter} from 'vue-router'
import axios from 'axios'
import qs from 'qs'

// 响应式数据
const businessId = ref('')
const business = ref({})
const user = ref({})
const cartArr = ref([])
const deliveryaddress = ref({})
const foodList = ref([])
const token = localStorage.getItem('token');
// 获取路由实例
const route = useRoute()
const router = useRouter()
// 从路由中获取 businessId
businessId.value = route.query.businessId

// 获取所有食品信息
const fetchFoodDetails = async () => {
  try {
    const response = await axios.get('food/listAllFood',
        {
          headers: {
            "Authorization": `Bearer ${token}`,
          }
        })
    foodList.value = response.data
  } catch (error) {
    console.error('获取食品信息失败:', error);
  }
}

// 获取用户和地址信息
const getUserAndAddress = () => {
  const userData = sessionStorage.getItem('user')
  user.value = userData ? JSON.parse(userData) : {}
  const addressData = localStorage.getItem(user.value.userId)
  deliveryaddress.value = addressData ? JSON.parse(addressData) : {}
}

// 获取商家信息和购物车数据
const getBusinessAndCart = async () => {
  try {
    const businessResponse = await axios.post('business/getBusinessById',
        qs.stringify({businessId: businessId.value}),
        {
          headers: {
            "Authorization": `Bearer ${token}`,
          }
        })
    business.value = businessResponse.data

    const cartResponse = await axios.post('cart/listCart',
        qs.stringify({
          userId: user.value.userId,
          businessId: businessId.value
        }),
        {
          headers: {
            "Authorization": `Bearer ${token}`,
          }
        })
    cartArr.value = cartResponse.data

    // 遍历购物车并为每个购物车项添加完整的食品信息
    cartArr.value.forEach(cartItem => {
      const food = foodList.value.find(f => f.foodId === cartItem.foodId);
      cartItem.food = food;
      console.log(cartItem.food)
    })
  } catch (error) {
    console.error(error)
  }
}

// 计算总价
const totalPrice = computed(() => {
  let total = 0
  cartArr.value.forEach(item => {
    total += item.food.foodPrice * item.quantity
  })
  total += business.value.deliveryPrice
  return total
})

// 跳转到地址选择页面
const toUserAddress = () => {
  router.push({path: '/userAddress', query: {businessId: businessId.value}})
}

// 跳转到支付页面并创建订单
const toPayment = async () => {
  if (!deliveryaddress.value) {
    alert('请选择送货地址！')
    return
  }
  try {
    const response = await axios.post('orders/createOrders',
        qs.stringify({
          userId: user.value.userId,
          businessId: businessId.value,
          daId: deliveryaddress.value.daId,
          orderTotal: totalPrice.value
        }),
        {
          headers: {
           "Authorization": `Bearer ${token}`,
          }})
    const orderId = response.data
    if (orderId) {
      router.push({path: '/payment', query: {orderId: orderId}})
    } else {
      alert('创建订单失败！')
    }
  } catch (error) {
    console.error(error)
  }
}

// 初始化数据
onMounted(async () => {
  await fetchFoodDetails()
  getUserAndAddress()
  await getBusinessAndCart()
})
</script>

<template>
  <div class="wrapper">
    <!-- header部分 -->
    <header>
      <p>确认订单</p>
    </header>

    <!-- 订单信息部分 -->
    <div class="order-info">
      <h5>订单配送至：</h5>
      <div class="order-info-address" @click="toUserAddress">
        <p>{{ deliveryaddress ? deliveryaddress.address : '请选择送货地址' }}</p>
        <i class="fa fa-angle-right"></i>
      </div>
      <p>{{ user.userName }}{{ user.userSex | sexFilter }} {{ user.userId }}</p>
    </div>

    <h3>{{ business.businessName }}</h3>

    <!-- 订单明细部分 -->
    <ul class="order-detailed">
      <li v-for="item in cartArr" :key="item.food.foodId">
        <div class="order-detailed-left">
          <img :src="item.food.foodImg" alt="">
          <p>{{ item.food.foodName }} x {{ item.quantity }}</p>
        </div>
        <p>&#165;{{ item.food.foodPrice * item.quantity }}</p>
      </li>
    </ul>

    <div class="order-deliveryfee">
      <p>配送费</p>
      <p>&#165;{{ business.deliveryPrice }}</p>
    </div>

    <!-- 合计部分 -->
    <div class="total">
      <div class="total-left">
        &#165;{{ totalPrice }}
      </div>
      <div class="total-right" @click="toPayment">
        去支付
      </div>
    </div>
  </div>
</template>

<style scoped>
/****************** 总容器 ******************/
.wrapper {
  width: 100%;
  height: 100%;
}

/****************** header部分 ******************/
.wrapper header {
  width: 100%;
  height: 12vw;
  background-color: #0097FF;
  color: #fff;
  font-size: 4.8vw;
  position: fixed;
  left: 0;
  top: 0;
  z-index: 1000;
  display: flex;
  justify-content: center;
  align-items: center;
}

/****************** 订单信息部分 ******************/
.wrapper .order-info {
  width: 100%;
  margin-top: 12vw;
  background-color: #0097EF;
  box-sizing: border-box;
  padding: 2vw;
  color: #fff;
}

.wrapper .order-info h5 {
  font-size: 3vw;
  font-weight: 300;
}

.wrapper .order-info .order-info-address {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-weight: 700;
  user-select: none;
  cursor: pointer;
  margin: 1vw 0;
}

.wrapper .order-info .order-info-address p {
  width: 90%;
  font-size: 5vw;
}

.wrapper .order-info .order-info-address i {
  font-size: 6vw;
}

.wrapper .order-info p {
  font-size: 3vw;
}

.wrapper h3 {
  box-sizing: border-box;
  padding: 3vw;
  font-size: 4vw;
  color: #666;
  border-bottom: solid 1px #DDD;
}

/****************** 订单明细部分 ******************/
.wrapper .order-detailed {
  width: 100%;
}

.wrapper .order-detailed li {
  width: 100%;
  height: 16vw;
  box-sizing: border-box;
  padding: 3vw;
  color: #666;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.wrapper .order-detailed li .order-detailed-left {
  display: flex;
  align-items: center;
}

.wrapper .order-detailed li .order-detailed-left img {
  width: 10vw;
  height: 10vw;
}

.wrapper .order-detailed li .order-detailed-left p {
  font-size: 3.5vw;
  margin-left: 3vw;
}

.wrapper .order-detailed li p {
  font-size: 3.5vw;
}

.wrapper .order-deliveryfee {
  width: 100%;
  height: 16vw;
  box-sizing: border-box;
  padding: 3vw;
  color: #666;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 3.5vw;
}

/****************** 订单合计部分 ******************/
.wrapper .total {
  width: 100%;
  height: 14vw;
  position: fixed;
  left: 0;
  bottom: 0;
  display: flex;
}

.wrapper .total .total-left {
  flex: 2;
  background-color: #505051;
  color: #fff;
  font-size: 4.5vw;
  font-weight: 700;
  user-select: none;
  display: flex;
  justify-content: center;
  align-items: center;
}

.wrapper .total .total-right {
  flex: 1;
  background-color: #38CA73;
  color: #fff;
  font-size: 4.5vw;
  font-weight: 700;
  user-select: none;
  cursor: pointer;
  display: flex;
  justify-content: center;
  align-items: center;
}
</style>
